<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #box{
            width: 900px;
            height: 360px;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 50px;
        }
        #box>div{
            width: 210px;
            height: 340px;
            float: left;
            margin-left: 8px;
            transition: all 0.5s;
        }

        #box>div:hover{
            box-shadow: 0 8px 10px #9D9D9D;
            margin-top: -10px;
        }
        #box div div{
            width: 100%;
            height: 280px;
            overflow: hidden;
        }

        #box div div img{
            width: 100%;
            height: 280px;
            transition: all 0.5s;
        }
        #box div div:hover img{
            transform: scale(1.1);
        }

        #box div ul{
            padding: 6px 10px;
            list-style: none;
        }
        #box div ul li:nth-of-type(1) a{
            font-size: 15px;
            color: #222222;
        }
        #box div ul li:nth-of-type(1) a:nth-of-type(1):hover{
            color: #00be06;
        }
        #box div ul li:nth-of-type(2) a{
            font-size: 14px;
            color: #999;
            margin: 2px 0 0;
        }
        #box div ul li:nth-of-type(1) span{
            font-size: 18px;
            color: #FF6200;
            float: right;
        }
        #box div div:nth-of-type(2){
            width: 100%;
            height: 60px;
            background-color: #F8F8F8;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="box">

    <div>
        <div>
            <img src="https://pic5.iqiyipic.com/image/20200716/c3/a7/v_150686727_m_601_m5_260_360.webp">
        </div>

        <div>
            <ul>
                <li><a href="https://www.iqiyi.com/v_2ffkwyeahh8.html?vfrm=pcw_home&vfrmblk=L&vfrmrst=712211_dianying_image1">生态箱</a><span>8.2</span></li>
                <li><a href="">魔术小伙化身搞笑奶爸</a></li>
            </ul>
        </div>
    </div>

    <div>
        <div>
            <img src="https://pic4.iqiyipic.com/image/20200714/f0/e0/v_150071344_m_601_m3_260_360.webp">
        </div>

        <div>
            <ul>
                <li><a href="https://www.iqiyi.com/v_19rxrcwm4w.html?vfrm=pcw_home&vfrmblk=L&vfrmrst=712211_dianying_image2">英雄</a><span>7.9</span></li>
                <li><a href="">超级特工上演追逐战</a></li>
            </ul>
        </div>
    </div>

    <div>
        <div>
            <img src="https://pic1.iqiyipic.com/common/lego/20200716/6023caa9ce354318a62d095f7c95f21c.webp">
        </div>

        <div>
            <ul>
                <li><a href="https://vip.iqiyi.com/html5VIP/activity/zhengtuActivity/index.html?fv=b36b16bd45ffc770">《征途》VIP超首发</a></li>
            </ul>
        </div>
    </div>

    <div>
        <div>
            <img src="https://pic0.iqiyipic.com/image/20200716/da/d7/v_131977591_m_601_m17_260_360.webp">
        </div>

        <div>
            <ul>
                <li><a href="https://www.iqiyi.com/v_19rsemgs2k.html?vfrm=pcw_home&vfrmblk=L&vfrmrst=712211_dianying_image4">嘿！小骨头</a><span>7.5</span></li>
                <li><a href="">白骨精成魔之路</a></li>
            </ul>
        </div>
    </div>
</div>
<a style="" href="7-16-work-2.html">作业二</a>
</body>
</html>